<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--ios是否允许创建快捷方式-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--ios顶部通知栏的样式：黑色-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!--遇到数字不让转换成电话号码的格式-->
    <meta content="telephone=no" name="format-detection">
    <meta name="description" content="乐淘是中国最大的正品运动鞋，皮鞋专卖" >
    <meta name="Keywords" content="乐淘 乐淘鞋城 买鞋子 上乐淘 运动鞋城" >
    <link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="assets/mui/css/mui.css">
    <link rel="stylesheet" href="assets/fa/css/font-awesome.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product.css">
    <title>乐淘-商品详情</title>
</head>
<body>
<!--首页-->
<!--通栏-->
<div class="ct_container">
    <header class="ct_header">
        <a href="javascript:history.back()" class="left"><span class="fa fa-arrow-left"></span></a>
        <h3>商品详情</h3>
        <a href="index.html" class="right"><span class="fa fa-home"></span></a>
    </header>
    <div class="ct_content">
        <div class="ct_wrapper">
            <div class="mui-scroll-wrapper">
                <!--滑动区域-->
                <div class="mui-scroll">
                    <div class="loading">
                        <span class="fa fa-spinner"></span>
                    </div>
                    <!--这里放置真实显示的DOM内容-->
                    <div class="detail">
                        <!--todo-->
                     </div>
                </div>
            </div>
            <div class="btns">
                <a href="#" class="btn_addCart">加入购物车</a>
                <a href="#" class="btn_buy">立即购买</a>
            </div>
        </div>

    </div>

    <footer class="ct_footer">
        <a class="tab_home fa fa-home" href="index.html"><span>首页</span></a>
        <a class="tab_cate fa fa-bars" href="category.html"><span>分类</span></a>
        <a class="tab_cart fa fa-shopping-cart" href="user/cart.html"><span>购物车</span></a>
        <a class="tab_user fa fa-user" href="user/user.html"><span>会员中心</span></a>
    </footer>
</div>
<script type="text/template" id="details">
    <%
        var pic = []

        if( !pic || !pic.length) {
            pic = [{ picAddr: 'images/none.jpg'}]
    }
    %>
    <!--轮播图-->
    <div class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <!--第一个内容区容器-->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#"><img src="<%=pic[pic.length-1].picAddr%>" alt=""></a>
            </div>
            <% for (var i = 0; i < pic.length; i++){ %>
            <div class="mui-slider-item">
                <a href="#"><img src="<%=pic[i].picAddr%>" alt=""></a>
            </div>
            <% } %>
            <div class="mui-slider-item">
                <a href="#"><img src="<%=pic[0].picAddr%>" alt=""></a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <% for (var i = 0; i < pic.length; i++){ %>
                <div class="mui-indicator <%=i==0?'mui-active':''%>"></div>
            <% } %>
        </div>
    </div>

    <!--产品介绍-->
    <div class="product_title">
        描述：<span><%=proName%></span>
    </div>
    <div class="price">
        价格：<span class="now">￥<%=price%></span>
        <span class="old">￥<%=oldPrice%></span>
    </div>
    <div class="size">
        尺码：
        <%var size = size.split('-')%>
        <% for(var i = size[0]; i<= size[1]; i++){ %>
        <span class="sizes"><%=i%></span>
        <% } %>
    </div>
    <div class="num">
        <div class="mui-pull-left">数量：</div>
        <div class="mui-pull-left selectNum">
            <span class="jian">-</span>
            <input readonly="" type="text" value="0" data-max="<%=num%>">
            <span class="jia">+</span>
        </div>
        <div class="mui-pull-left">剩余：<%=num%>件</div>
    </div>

</script>
<script src="assets/mui/js/mui.js"></script>
<script src="assets/zepto/zepto.min.js"></script>
<script src="assets/artTemplate/template-native.js"></script>
<script src="js/product.js"></script>
<script src="js/common.js"></script>
<!--<script src="js/common.js"></script>-->
</body>
</html>